<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${pageTitle}">视频上传</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎬</text></svg>">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <a href="/" class="logo">🎬 VideoTech</a>
            <ul class="nav-links">
                <li><a href="/">首页</a></li>
                <li><a href="/upload" class="active">上传</a></li>
                <li><a href="/search">搜索</a></li>
                <li><a href="/h2-console" target="_blank">数据库</a></li>
            </ul>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="main-content">
        <div class="container">
            <!-- 页面标题 -->
            <h1 class="page-title">上传视频</h1>

            <!-- 上传表单 -->
            <div class="upload-container" style="max-width: 800px; margin: 0 auto;">
                <!-- 视频信息输入 -->
                <div class="form-group" style="margin-bottom: 2rem;">
                    <label for="videoTitle" style="display: block; margin-bottom: 0.5rem; color: var(--text-secondary); font-weight: 500;">视频标题</label>
                    <input type="text" id="videoTitle" class="form-input" placeholder="输入视频标题..." style="width: 100%; padding: 1rem; background: var(--card-bg); border: 2px solid var(--border-color); border-radius: 10px; color: var(--text-primary); font-size: 1rem;">
                </div>

                <div class="form-group" style="margin-bottom: 2rem;">
                    <label for="videoDescription" style="display: block; margin-bottom: 0.5rem; color: var(--text-secondary); font-weight: 500;">视频描述</label>
                    <textarea id="videoDescription" class="form-input" placeholder="输入视频描述..." rows="4" style="width: 100%; padding: 1rem; background: var(--card-bg); border: 2px solid var(--border-color); border-radius: 10px; color: var(--text-primary); font-size: 1rem; resize: vertical; min-height: 100px;"></textarea>
                </div>

                <!-- 文件上传区域 -->
                <div class="upload-area">
                    <div class="upload-icon">📁</div>
                    <div class="upload-text">点击或拖拽视频文件到此处</div>
                    <div class="upload-hint">支持格式: MP4, AVI, MOV, WMV, FLV, WebM, MKV<br>最大文件大小: 500MB</div>
                    <input type="file" id="videoFile" accept="video/*" style="display: none;">
                </div>

                <!-- 上传按钮 -->
                <div style="text-align: center; margin-top: 2rem;">
                    <button type="button" class="btn btn-primary" onclick="document.getElementById('videoFile').click()">
                        选择文件
                    </button>
                    <a href="/" class="btn btn-secondary" style="margin-left: 1rem;">返回首页</a>
                </div>

                <!-- 上传提示 -->
                <div class="upload-tips" style="margin-top: 3rem; padding: 2rem; background: var(--card-bg); border-radius: 15px; border: 1px solid var(--border-color);">
                    <h3 style="color: var(--primary-color); margin-bottom: 1rem;">📋 上传提示</h3>
                    <ul style="color: var(--text-secondary); line-height: 1.8;">
                        <li>🎯 建议上传高质量的视频文件以获得更好的播放体验</li>
                        <li>⚡ 支持断点续传，上传过程中可以暂停和恢复</li>
                        <li>🔒 所有上传的文件都会进行安全检查和病毒扫描</li>
                        <li>📊 上传完成后可以查看详细的播放统计数据</li>
                        <li>🎨 系统会自动生成视频缩略图和预览</li>
                        <li>🚀 采用先进的编码技术，确保快速加载和流畅播放</li>
                    </ul>
                </div>

                <!-- 技术规格 -->
                <div class="tech-specs" style="margin-top: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
                    <div class="spec-card" style="background: var(--card-bg); padding: 1.5rem; border-radius: 10px; border: 1px solid var(--border-color); text-align: center;">
                        <div style="font-size: 2rem; color: var(--primary-color); margin-bottom: 0.5rem;">🎬</div>
                        <div style="font-weight: 600; margin-bottom: 0.5rem;">视频格式</div>
                        <div style="color: var(--text-muted); font-size: 0.9rem;">MP4, AVI, MOV<br>WMV, FLV, WebM, MKV</div>
                    </div>
                    <div class="spec-card" style="background: var(--card-bg); padding: 1.5rem; border-radius: 10px; border: 1px solid var(--border-color); text-align: center;">
                        <div style="font-size: 2rem; color: var(--primary-color); margin-bottom: 0.5rem;">💾</div>
                        <div style="font-weight: 600; margin-bottom: 0.5rem;">文件大小</div>
                        <div style="color: var(--text-muted); font-size: 0.9rem;">最大支持<br>500MB</div>
                    </div>
                    <div class="spec-card" style="background: var(--card-bg); padding: 1.5rem; border-radius: 10px; border: 1px solid var(--border-color); text-align: center;">
                        <div style="font-size: 2rem; color: var(--primary-color); margin-bottom: 0.5rem;">⚡</div>
                        <div style="font-weight: 600; margin-bottom: 0.5rem;">上传速度</div>
                        <div style="color: var(--text-muted); font-size: 0.9rem;">高速上传<br>断点续传</div>
                    </div>
                    <div class="spec-card" style="background: var(--card-bg); padding: 1.5rem; border-radius: 10px; border: 1px solid var(--border-color); text-align: center;">
                        <div style="font-size: 2rem; color: var(--primary-color); margin-bottom: 0.5rem;">🔒</div>
                        <div style="font-weight: 600; margin-bottom: 0.5rem;">安全保障</div>
                        <div style="color: var(--text-muted); font-size: 0.9rem;">病毒扫描<br>安全存储</div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer style="background: var(--card-bg); padding: 2rem 0; margin-top: 3rem; border-top: 1px solid var(--border-color);">
        <div class="container" style="text-align: center; color: var(--text-muted);">
            <p>&copy; 2024 VideoTech Platform. 科技感十足的视频平台.</p>
        </div>
    </footer>

    <script th:src="@{/js/app.js}"></script>
    <script>
        // 表单输入样式增强
        document.addEventListener('DOMContentLoaded', function() {
            const inputs = document.querySelectorAll('.form-input');
            
            inputs.forEach(input => {
                input.addEventListener('focus', function() {
                    this.style.borderColor = 'var(--primary-color)';
                    this.style.boxShadow = 'var(--shadow-glow)';
                });
                
                input.addEventListener('blur', function() {
                    this.style.borderColor = 'var(--border-color)';
                    this.style.boxShadow = 'none';
                });
            });
        });
    </script>
</body>
</html>
